
<script setup>
import {ref} from "vue";

const getImageUrl=(user)=>{
  return new URL(`../assets/images/${user}.png`,import.meta.url).href
}

//这个tableData是假数据，等会我们使用axios请求mock数据
const tableData = ref([
  {
    name: "Java",
    todayBuy: 100,
    monthBuy: 200,
    totalBuy: 300,
  },
  {
    name: "Python",
    todayBuy: 100,
    monthBuy: 200,
    totalBuy: 300,
  }
])

const tableLabel = ref({
  name: "课程",
  todayBuy: "今日购买",
  monthBuy: "本月购买",
  totalBuy: "总购买",
})
</script>
<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8" style="margin-top: 20px">
      <el-card shadow="hover">
        <div class="user">
          <img :src="getImageUrl('user')" class="user"/>
          <div class="user-info">
            <p>admin</p>
            <p>超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间：<span>2024-03-30</span></p>
          <p>上次登录地点：<span>北京</span></p>
        </div>
      </el-card>

      <el-card shadow="hover" class="table">
        <el-table :data="tableData">
          <el-table-column
              v-for="(item,index) in tableLabel"
              :prop="index" :label="item" width="100"/>































































































































































































































































        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16" style="margin-top: 20px">

    </el-col>
  </el-row>
</template>

<style lang="less" scoped>
  .user{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    img{
      border-radius: 60%;
      width: 150px;
      margin-right: 50px;
    }
  }
  .user-info{
    font-size: 20px;
  }
  .login-info{
    p{
      font-size: 15px;
      color: #999;
      line-height: 30px;
      span{
        color: #666;
        margin-left: 10px;
        font-weight: bold;
      }
    }
  }
</style>